<%@include file="../../../fragments/_taglibs.jsp" %>
<%@include file="../../../fragments/_message.jsp" %>
<script>
function Back(link)
{
     var htmlStr = $('#section').html();
    $('#xFormatoSec').val(htmlStr);
    alert(link);
}
</script>

<style>
    #section{
        position:relative;
        overflow:auto;
        width:auto;
        height:400px;
        
        
    }
    a{text-decoration: none;}
    
    .stepDesc{
    
    
    margin:5px 3px 0 3px;
    padding:5px;
    text-decoration: none;
    text-align: center;
    font: bold 13px Verdana, Arial, Helvetica, sans-serif;
    min-width: 10px;
    color:#FFF;
    
    background-color:   #F48F35;
    border: 1px solid #5A5655;
    -moz-border-radius  : 5px; 
    -webkit-border-radius: 5px;
    }
    
.new_input {
    cursor: move;
    min-width: 20px;
   
    position: absolute;
    height:auto;
    
    border-width: 1px;
    
    
}

.buttonNext:visited {text-decoration: none;color:#FFF}
.buttonNext {
  display:block;
  float:right;
  margin:5px 3px 0 3px;
  padding:5px;
  text-decoration: none;
  text-align: center;
  font: bold 13px Verdana, Arial, Helvetica, sans-serif;
  width:100px;
  color:#FFF;
  outline-style:none;
  background-color:   #87B308;
  border: 1px solid #5A5655;
  -moz-border-radius  : 5px; 
  -webkit-border-radius: 5px;    
}
.buttonFinish {
  display:block;
  float:right;
  margin:5px 10px 0 3px;
  padding:5px;
  text-decoration: none;
  text-align: center;
  font: bold 13px Verdana, Arial, Helvetica, sans-serif;
  width:100px;
  color:#FFF;
  outline-style:none;
  background-color:   #87B308;
  border: 1px solid #5A5655;
  -moz-border-radius  : 5px; 
  -webkit-border-radius: 5px;    
}



.buttonFinish:visited {
    text-decoration: none;
    color:#FFF;
}

</style>

<div>
<form:form id="fsave" name="fsave" modelAttribute="wizardFormController" method="PUT"  action="./wizard/saving/" >

    <fmt:formatNumber value="0" var="orden"/>     

    <c:choose>
        <c:when test="${wizardFormController.sec_built!=null && fn:length(wizardFormController.sec_built)>0}">
            <c:forEach items="${wizardFormController.sec_built}" var="item">

               
                <span class="stepDesc"> Pantalla ${item.norden} de ${wizardFormController.totalPantallas}</span>

                    <c:set var="orden"  value="${item.norden}"/>
                    
                    <form:hidden  id="xFormatoSec" path="sec_built_tmp[${orden}].xformatoSec"></form:hidden>
                <div id="section">
                    
                   
                            ${item.xformatoSec}
                  
                    
                </div>
            </c:forEach>



        </c:when>



        <c:otherwise>

        </c:otherwise>
    </c:choose>
                
                <div style="floar:right; position: relative"> 
             <c:choose>

            <c:when test="${orden == wizardFormController.totalPantallas}">
                
                <!--<a class="buttonFinish" href="./wizard/"> GUARDAR</a>-->
                <button class="buttonFinish">Guardar</button>
            </c:when>
            <c:otherwise>
               
               <a class="buttonNext" href="./wizard/preview/${orden+1}"> SIGUIENTE
               </a>
               
            </c:otherwise>
             </c:choose>   
                </div>
                
      
   
       
</form:form>
                </div>